import React, { useState, useEffect } from 'react';
import './FloatingBall.css';

interface FloatingBallProps {
  onClick?: () => void;
  className?: string;
}

const FloatingBall: React.FC<FloatingBallProps> = ({ onClick, className = '' }) => {
  const [isVisible, setIsVisible] = useState(true);
  const [isPulsing, setIsPulsing] = useState(false);
  const [position, setPosition] = useState({ x: 0, y: 0 });

  useEffect(() => {
    // 定期触发脉冲动画
    const pulseInterval = setInterval(() => {
      setIsPulsing(true);
      setTimeout(() => setIsPulsing(false), 1000);
    }, 5000);

    return () => {
      clearInterval(pulseInterval);
    };
  }, []);

  const handleClick = () => {
    if (onClick) {
      onClick();
    } else {
      // 默认行为：显示提示
      alert('AI助手已激活！');
    }
  };

  const handleMouseEnter = () => {
    setIsPulsing(true);
  };

  const handleMouseLeave = () => {
    setIsPulsing(false);
  };

  return (
    <div
      className={`floating-ball ${isVisible ? 'visible' : ''} ${isPulsing ? 'pulsing' : ''} ${className}`}
      onClick={handleClick}
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
    >
      <div className="floating-ball-inner">
        <div className="floating-ball-icon">
          <svg
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M12 2C13.1 2 14 2.9 14 4C14 5.1 13.1 6 12 6C10.9 6 10 5.1 10 4C10 2.9 10.9 2 12 2ZM21 9V7L15 1H5C3.89 1 3 1.89 3 3V21C3 22.11 3.89 23 5 23H19C20.11 23 21 22.11 21 21V9M19 9H14V4L19 9Z"
              fill="currentColor"
            />
          </svg>
        </div>
      </div>
      
      {/* 脉冲环效果 */}
      <div className="floating-ball-pulse-ring"></div>
      <div className="floating-ball-pulse-ring delay-1"></div>
      <div className="floating-ball-pulse-ring delay-2"></div>
      
      {/* 工具提示 */}
      <div className="floating-ball-tooltip">
        点击开始AI对话
      </div>
    </div>
  );
};

export default FloatingBall;
